<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Tab切换</title>
</head>

<body>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 14px;
    }
    body{
      padding: 20px;
    }
    a:link,
    a:visited {
      color: #000;
      text-decoration: none;
    }

    div {
      box-sizing: border-box;
    }

    .notice {
      overflow: hidden;
      width: 298px;
      height: 100px;
      margin: 10px;
      border: 1px solid #eee;
    }

    .notice-tit {
      height: 30px;
      position: relative;
    }

    .notice-tit ul {
      position: absolute;
      width: 300px;
      left: -1px;
      /* top: -1px; */
      background: #f7f7f7;
    }

    .notice-tit li {
      box-sizing: border-box;
      float: left;
      width: 60px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      overflow: hidden;
      border-bottom: 1px solid #eee;

    }

    .notice-tit li a:hover {
      color: #f90;
    }

    .notice-tit li.select {
      background: #fff;
      border-style: solid;
      border-width: 0 1px 1px 1px;
      border-color: #eee;
      border-bottom-color: #fff;
    }

    .notice-con .mod {
      margin: 10px 10px 20px;

    }

    .notice-con .mod li {
      float: left;
      overflow: hidden;
      width: 50%;
      height: 25px;
    }
  </style>
  tab切换，鼠标移过：
  <div class="notice">
    <div class="notice-tit" id="notice-tit">
      <ul>
        <li class="select"><a href="">公告</a></li>
        <li><a href="">规则</a></li>
        <li><a href="">论坛</a></li>
        <li><a href="">安全</a></li>
        <li><a href="">公益</a></li>
      </ul>
    </div>
    <div class="notice-con" id="notice-con">
      <div class="mod">
        <ul>
          <li><a href="">公告公告，公告公告</a></li>
          <li><a href="">公告公告，公告公告</a></li>
          <li><a href="">公告公告，公告公告</a></li>
          <li><a href="">公告公告，公告公告</a></li>
        </ul>
      </div>
      <div class="mod">
        <ul>
          <li><a href="">规则规则，规则规则</a></li>
          <li><a href="">规则规则，规则规则</a></li>
          <li><a href="">规则规则，规则规则</a></li>
          <li><a href="">规则规则，规则规则</a></li>
        </ul>
      </div>
      <div class="mod">
        <ul>
          <li><a href="">论坛论坛，论坛论坛</a></li>
          <li><a href="">论坛论坛，论坛论坛</a></li>
          <li><a href="">论坛论坛，论坛论坛</a></li>
          <li><a href="">论坛论坛，论坛论坛</a></li>
        </ul>
      </div>
      <div class="mod">
        <ul>
          <li><a href="">安全安全，安全安全</a></li>
          <li><a href="">安全安全，安全安全</a></li>
          <li><a href="">安全安全，安全安全</a></li>
          <li><a href="">安全安全，安全安全</a></li>
        </ul>
      </div>
      <div class="mod">
        <ul>
          <li><a href="">公益公益，公益公益</a></li>
          <li><a href="">公益公益，公益公益</a></li>
          <li><a href="">公益公益，公益公益</a></li>
          <li><a href="">公益公益，公益公益</a></li>
        </ul>
      </div>
    </div>
  </div>
  <script>
    function $(id) {
      return typeof id === 'string' ? document.getElementById(id) : id
    }
    tab1();
    function tab1() {
      //获取鼠标滑过或点击的标签与对应内容
      var titles = $('notice-tit').getElementsByTagName('li'),
        divs = $('notice-con').getElementsByTagName('div');
      if (titles.length == divs.length) {
        for (let i = 0; i < titles.length; i++) {
          titles[i].id = i;
          titles[i].onmouseover = function () {
            //清除所有class
            for (let j = 0; j < titles.length; j++) {
              titles[j].className = "";
              divs[j].style.display = "none";
            }
            //设当前为高亮
            this.className = "select";
            divs[this.id].style.display = "block";
          }

        }
      }
    }

  </script>

  <!-- ===延迟================================================================================ -->

  tab延迟切换：
    <div class="notice">
    <div class="notice-tit" id="notice-tit2">
      <ul>
        <li class="select"><a href="">公告</a></li>
        <li><a href="">规则</a></li>
        <li><a href="">论坛</a></li>
        <li><a href="">安全</a></li>
        <li><a href="">公益</a></li>
      </ul>
    </div>
    <div class="notice-con" id="notice-con2">
      <div class="mod">
        <ul>
          <li><a href="">公告公告，公告公告</a></li>
          <li><a href="">公告公告，公告公告</a></li>
          <li><a href="">公告公告，公告公告</a></li>
          <li><a href="">公告公告，公告公告</a></li>
        </ul>
      </div>
      <div class="mod">
        <ul>
          <li><a href="">规则规则，规则规则</a></li>
          <li><a href="">规则规则，规则规则</a></li>
          <li><a href="">规则规则，规则规则</a></li>
          <li><a href="">规则规则，规则规则</a></li>
        </ul>
      </div>
      <div class="mod">
        <ul>
          <li><a href="">论坛论坛，论坛论坛</a></li>
          <li><a href="">论坛论坛，论坛论坛</a></li>
          <li><a href="">论坛论坛，论坛论坛</a></li>
          <li><a href="">论坛论坛，论坛论坛</a></li>
        </ul>
      </div>
      <div class="mod">
        <ul>
          <li><a href="">安全安全，安全安全</a></li>
          <li><a href="">安全安全，安全安全</a></li>
          <li><a href="">安全安全，安全安全</a></li>
          <li><a href="">安全安全，安全安全</a></li>
        </ul>
      </div>
      <div class="mod">
        <ul>
          <li><a href="">公益公益，公益公益</a></li>
          <li><a href="">公益公益，公益公益</a></li>
          <li><a href="">公益公益，公益公益</a></li>
          <li><a href="">公益公益，公益公益</a></li>
        </ul>
      </div>
    </div>
  </div>
  <script>
  tab2();
    function tab2() {
      var index = 0;
      var timer = null;

      var lis =$('notice-tit2').getElementsByTagName('li'),
        divs = $('notice-con2').getElementsByTagName('div');

      //获取鼠标滑过或点击的标签与对应内容
      if (lis.length == divs.length) {
        for (let i = 0; i < lis.length; i++) {
          lis[i].id = i;
          lis[i].onmouseover = function () {
            //用that引用当前li
            var that = this;
            //如果存在正在执行的定时器就清除，停留时间大于500ms执行
              if (timer) {
                clearTimeout(timer);
                timer = null;
              }
              //延迟半秒执行
              timer = setTimeout(function(){
                //清除所有class
                for (let j = 0; j < lis.length; j++) {
                  lis[j].className = "";
                  divs[j].style.display = "none";
                }
                //设当前为高亮
                that.className = "select";
                divs[that.id].style.display = "block";
              },500)
          }

        }
      }
    }
  </script>
  <!-- ===自动切换================================================================================== -->
  tab自动切换：
   <div class="notice">
    <div class="notice-tit" id="notice-tit3">
      <ul>
        <li class="select"><a href="">公告</a></li>
        <li><a href="">规则</a></li>
        <li><a href="">论坛</a></li>
        <li><a href="">安全</a></li>
        <li><a href="">公益</a></li>
      </ul>
    </div>
    <div class="notice-con" id="notice-con3">
      <div class="mod">
        <ul>
          <li><a href="">公告公告，公告公告</a></li>
          <li><a href="">公告公告，公告公告</a></li>
          <li><a href="">公告公告，公告公告</a></li>
          <li><a href="">公告公告，公告公告</a></li>
        </ul>
      </div>
      <div class="mod">
        <ul>
          <li><a href="">规则规则，规则规则</a></li>
          <li><a href="">规则规则，规则规则</a></li>
          <li><a href="">规则规则，规则规则</a></li>
          <li><a href="">规则规则，规则规则</a></li>
        </ul>
      </div>
      <div class="mod">
        <ul>
          <li><a href="">论坛论坛，论坛论坛</a></li>
          <li><a href="">论坛论坛，论坛论坛</a></li>
          <li><a href="">论坛论坛，论坛论坛</a></li>
          <li><a href="">论坛论坛，论坛论坛</a></li>
        </ul>
      </div>
      <div class="mod">
        <ul>
          <li><a href="">安全安全，安全安全</a></li>
          <li><a href="">安全安全，安全安全</a></li>
          <li><a href="">安全安全，安全安全</a></li>
          <li><a href="">安全安全，安全安全</a></li>
        </ul>
      </div>
      <div class="mod">
        <ul>
          <li><a href="">公益公益，公益公益</a></li>
          <li><a href="">公益公益，公益公益</a></li>
          <li><a href="">公益公益，公益公益</a></li>
          <li><a href="">公益公益，公益公益</a></li>
        </ul>
      </div>
    </div>
  </div>
  <script>
    tab3();
    function tab3() {
      //当前高亮索引
      var index = 0;
      var timer = null;
      //获取鼠标滑过或点击的标签与对应内容
      var lis = $('notice-tit3').getElementsByTagName('li'),
        divs = $('notice-con3').getElementsByTagName('div');
      //遍历每个标签，且给他们绑定事件
      for (var i = 0; i < lis.length; i++) {
        lis[i].id=i;
        lis[i].onmouseover=function(){
          clearInterval(timer);
          changeOption(this.id);
        }
        lis[i].onmouseout=function(){
          timer = setInterval(autoPlay,2000);
        }
      }
      if (timer) {
        clearInterval(timer);
        timer=null;
      }
      //添加定时器，改变高亮索引
      timer = setInterval(autoPlay,2000);
      function autoPlay(){
          index++;
          if (index>=lis.length) {
            index=0;
          }
          changeOption(index);
      }
      function changeOption(curIndex){
        //console.log(curIndex);
        //清除所有class
        for (let j = 0; j < lis.length; j++) {
          lis[j].className = "";
          divs[j].style.display = "none";
        }
        //高亮当前标签
        lis[curIndex].className = "select";
        divs[curIndex].style.display = "block";
        index = curIndex;
      }
    }
  </script>

  <style>
  .wrap{height:170px;
        width:490px;
        margin:30px;
        overflow: hidden;
        position: relative;}
  .wrap ul{position:absolute;} 
  .wrap ul li{height:170px;}
  .wrap ol{position:absolute;
           right:5px;
           bottom:10px;}
  .wrap ol li{height:20px; width: 20px;
              background:#ccc;
              border:solid 1px #666;
              margin-left:5px;
              color:#000;
              float:left;
              line-height:center;
              text-align:center;
              cursor:pointer;}
  .wrap ol .on{background:#E97305;
               color:#fff;}

  </style>
  <div class="wrap" id='wrap'>
  轮播图：
    <ul id="pic">
      <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>    
    </ul>
    <ol id="list">
      <li class="on">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
  </div>
    <script type="text/javascript">
  window.onload=function(){
    var wrap=document.getElementById('wrap'),
        pic=document.getElementById('pic').getElementsByTagName('li'),
        list=document.getElementById('list').getElementsByTagName('li'),
        index=0,
        timer=null;

      // 定义并调用自动播放函数
      function autoPlay(){
          index++;
          if (index>=list.length) {
            index=0;
          }
          changeOption(index);
      }
      //autoPlay();
     
      // 定义图片切换函数
      function changeOption(curIndex){
        for (let j = 0; j < list.length; j++) {
          list[j].className = "";
          pic[j].style.display = "none";
        }
        list[curIndex].className = "on";
        pic[curIndex].style.display = "block";
        index = curIndex;
      }
      // 遍历所有数字导航实现划过切换至对应的图片
      for (var i = 0; i < list.length; i++) {
        list[i].id=i;
        // 鼠标划过整个容器时停止自动播放
        list[i].onmouseover=function(){
          clearInterval(timer);
          changeOption(this.id);
        }
        // 鼠标离开整个容器时继续播放至下一张
        list[i].onmouseout=function(){
          timer = setInterval(autoPlay,2000);
        }
      }
      if (timer) {
        clearInterval(timer);
        timer=null;
      }
      //添加定时器，改变高亮索引
      timer = setInterval(autoPlay,2000);

   }

  </script> 
</body>

</html>